<template>
  <div style="font-size: 14px;">
    <div style="display: flex;height: 40px;padding: 0 15%;background-color: #f5f5f5;">
      <div class="top-title" style="padding-right: 20px;line-height: 40px;color: #666;">嗨，欢迎来到<span style="color: #b31e22;">XXX</span></div>
      <div class="top-title" style="padding-right: 20px;line-height: 40px;color: #666;margin-left: 20px;">网店代销</div>
      <div class="top-title" style="padding-right: 20px;line-height: 40px;color: #666;margin-left: 20px;">帮助中心</div>
      <div style="flex: 1;display: flex;">
        <div style="flex: 1;"></div>
        <div style="width: 300px;display: flex;">
          <el-button type="text" style="color: #666;" class="top-title" @click="toLogin">登录</el-button>
          <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="toLogin">注册</el-button>
          <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title">我的U袋</el-button>
          <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title">我的订单</el-button>
          <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title">积分平台</el-button>
        </div>

      </div>
    </div>
    <div style="margin: 0 15%;height: 100px;line-height: 100px;">
      <div style="display: flex;">
        <div style="width: 200px;height: 100px;" @click="selMenu(2)">
          <img src="../../../public/img/logo.jpg" style="cursor: pointer;width: 200px;height: 100px;">
        </div>
        <div style="flex: 1;text-align: center;padding: 0 50px;">
          <el-input placeholder="Ta们都在搜XXX" v-model="input" style="width: 100%;margin-top: 30px;">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
        <div style="width: 200px;text-align: center;">
          <el-button type="warning" icon="el-icon-shopping-cart-2">购物车 0 件</el-button>
        </div>
      </div>
    </div>

    <div style="height: 40px;line-height: 40px;background-color: #333;display: flex;">
      <div  style="margin-left: 15%;color: #FFFFFF;width: 200px;background-color: #b31e22;">
        <div><i class="el-icon-menu" style="margin-left: 10px;"></i>全部分类</div>
      </div>
      <div :class="'menu-index '+(menuIndex===2?'menu-active':'')" @click="selMenu(2)">
        首页
      </div>
      <div :class="'menu-index '+(menuIndex===3?'menu-active':'')" @click="selMenu(3)">
        企业简介
      </div>
      <div :class="'menu-index '+(menuIndex===4?'menu-active':'')" @click="selMenu(4)">
        新手上路
      </div>
      <div :class="'menu-index '+(menuIndex===5?'menu-active':'')" @click="selMenu(5)">
        U袋学堂
      </div>
      <div :class="'menu-index '+(menuIndex===6?'menu-active':'')" @click="selMenu(6)">
        企业账号
      </div>
      <div :class="'menu-index '+(menuIndex===7?'menu-active':'')" @click="selMenu(7)">
        诚信合约
      </div>
      <div :class="'menu-index '+(menuIndex===8?'menu-active':'')" @click="selMenu(8)">
        实时下架
      </div>
    </div>

  </div>
</template>

<script>
  export default {
      data() {
        return {
          input:'',
          menuIndex: 1
        };
      },
      mounted() {
      },
      methods: {
        selMenu(index){
          if(this.menuIndex === index){
            return;
          }
          this.menuIndex = index;
          if(index === 2){
            this.$router.push({path: '/home/index'});
          }else if(index === 5){
            this.$router.push({path: '/video/index'});
          }else if(index === 6){
            this.$router.push({path: '/enterprise/index'});
          }else if(index === 7){
            this.$router.push({path: '/contract/index'});
          }else if(index === 8){
            this.$router.push({path: '/shelf/index'});
          }
         },
        toLogin(){
          this.$router.push({path: '/login'});
        }
      }
    };
</script>

<style>
  .top-title:hover{
    cursor: pointer;
    color: #b31e22!important;
  }
  .el-input-group__append, .el-input-group__prepend{
    background-color: #b31e22!important;
    color: #ffffff!important;
  }
  .menu-index{
    text-align: center;
    width: 100px;
    color: #FFFFFF;
    cursor: pointer;
  }
  .menu-index:hover{
    background-color: #666;
  }
  .menu-active{
    color: red;
  }
</style>
